<template>
  <el-row
    v-if="elementParent && elementParent.key"
    id="form-make-grid"
    :key="elementParent.key"
    :class="{ active: selectWidget && selectWidget.key == elementParent.key }"
    :gutter="0"
    type="flex"
    class="widget-col cursor drag-widget form-make-grid-scroll"
    @click.native.stop="handleSelectWidget(elementParent)"
  >
    <el-col v-for="(col, colIndex) in elementParent.columns" :key="colIndex" :span="elementParent.span || 12" class="relative">
      <draggable
        v-model="col.list"
        v-bind="{ group: 'formMake', ghostClass: 'ghost', animation: 200, handle: '.drag-widget' }"
        :move="handelMove"
        class="widget-grid-list"
        item-key="name"
        @add="handleWidgetColAdd($event, elementParent, colIndex)"
      >
        <div v-for="(element, index) in col.list" :key="element.key">
          <FormMakeItem :element="element" :form-options="widgetData" style="overflow: hidden;" is-pre-view @handleWidgetClone="handleWidgetClone($event, 'child', col, index)" @handleWidgetDelete="handleWidgetDelete($event, 'child', col, index)" />
        </div>
      </draggable>
      <div v-if="col.list.length === 0" class="empty-text">从左侧拖拽添加字段</div>
    </el-col>
    <template v-if="isPreView && selectWidget && selectWidget.key == elementParent.key">
      <div v-if="selectWidget" class="widget-view-action">
        <!-- <div class="icon drag-widget"><i class="el-icon-rank font13" /></div> -->
        <!-- <div title="复制" class="icon" @click.stop="handleWidgetClone(elementParent)"><i class="el-icon-document-copy" /></div>
        <div title="删除" class="icon" @click.stop="handleWidgetDelete(elementParent)"><i class="el-icon-close font14"/></div> -->
        <img :src="copyIcon" class="icon" alt="复制" @click.stop="handleWidgetClone(elementParent)">
        <img :src="deleteIcon" class="icon" alt="删除" @click.stop="handleWidgetDelete(elementParent)">
      </div>
    </template>
  </el-row>
</template>

<script>
import draggable from 'vuedraggable';
import LimitMove from '@/views/legal/process/components/formMake/components/mixins/limitMove';
import FormMakeItem from './FormMakeItem';
import { EventBus } from '@/utils/eventBus';
import { mapState } from 'vuex';
import copyIcon from '@/assets/auditProcess/copy_form.png';
import deleteIcon from '@/assets/auditProcess/delete_form.png';
import { forEachFormOptions } from '@/utils/formMakeUtils';
export default {
  name: 'FormMakeGrid',
  components: { draggable, FormMakeItem },
  mixins: [LimitMove],
  props: {
    elementParent: {
      type: Object,
      default: null
    },
    isPreView: { // 是否配置中
      type: Boolean,
      default: false
    },
    widgetData: {
      type: Object,
      default: () => {
        return {
          list: [],
          config: { labelWidth: 100, labelPosition: 'right' }
        };
      }
    }
  },
  data() {
    return {
      copyIcon, deleteIcon
    };
  },
  computed: {
    ...mapState({
      'selectWidget': state => state.formMake.selectWidget
    })
  },
  methods: {
    // 添加组件事件
    handleWidgetColAdd(evt, row, colIndex) {
      // 只有从左边和子表单拖出来才算是新增
      if (evt.from.className.indexOf('widget-left-components') < 0 && evt.from.className.indexOf('widget-subtable') < 0) {
        return;
      }

      const newIndex = evt.newIndex;
      if (!newIndex && newIndex !== 0) return;
      const widgetItem = this.extendsProps(row.columns[colIndex].list[newIndex]);
      row.columns[colIndex].list[newIndex] = widgetItem;
      this.$store.dispatch('setSelectWidget', widgetItem);
      this.$forceUpdate();
      EventBus.$emit('formOptionsChange', { type: 'add', data: _.cloneDeep(widgetItem) });
    },
    extendsProps(item) {
      // 为拖拽到容器的元素添加唯一 key
      const key = new Date().valueOf() + '_' + Math.ceil(Math.random() * 99999);
      const cloneItem = _.cloneDeep(item);
      // 给新添加进来的组件，添加新的属性，但是为了不影响原数据，所以深拷贝
      if (!cloneItem.key) {
        cloneItem.key = key;
        cloneItem._isNew = true;
      }
      if (cloneItem.isSubTable) {
        delete cloneItem.isSubTable;
        delete cloneItem.linkFormKey;
        delete cloneItem.subformFullName;
      }
      return cloneItem;
    },

    handleSelectWidget(element) {
      if (!this.isPreView) return;
      this.$store.dispatch('setSelectWidget', element);
    },
    handleWidgetClone(element, type, item, index) {
      if (type !== 'child') {
        this.$emit('handleWidgetClone', element);
      } else {
        const cloneElement = _.cloneDeep(element);
        forEachFormOptions([cloneElement], (element) => {
          delete element.isFilter;
        });
        const key = new Date().valueOf() + '_' + Math.ceil(Math.random() * 99999);
        cloneElement.key = key;
        cloneElement._isNew = true;
        item.list.splice(index, 0, cloneElement);
        this.$store.dispatch('setSelectWidget', cloneElement);
        EventBus.$emit('formOptionsChange', { type: 'add', data: _.cloneDeep(cloneElement) });
      }
    },
    handleWidgetDelete(element, type, item, index) {
      if (type !== 'child') {
        this.$emit('handleWidgetDelete', element);
      } else {
        const deleteItem = _.cloneDeep(item.list[index]);
        item.list.splice(index, 1);
        EventBus.$emit('formOptionsChange', { type: 'remove', data: deleteItem });
        if (item.list.length) {
          this.$store.dispatch('setSelectWidget', item.list[0]);
        } else {
          this.$store.dispatch('setSelectWidget', element);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import './mixins/style.scss';
.widget-view-action{
  position: absolute;
  right: 28px;
  top: 12px;
  height: 28px;
  line-height: 28px;
  z-index: 9;
  display: flex;
  .icon {
    margin-left: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff;
  }
  i{
    font-size: 12px;
    color: #999999;
    margin: 0 5px;
  }
  .font13 { font-size: 13px; }
  .font14 { font-size: 14px !important; }
}
.cursor {
  cursor: pointer;
}

// 网格布局
.widget-grid-list{
  min-height: 50px;
  border: 1px dashed #ccc;
  background: #fff;
  overflow: hidden;
  height: 100%;
}
.widget-col{
  padding-bottom: 0;
  margin: 0 2px !important;
  padding: 5px;
  position: relative;
  background-color: #fff;
  &.active{
    background-color: #EFF3FB;
  }
  &:hover{
    background-color: #EFF3FB;
  }
  &::v-deep {
    .el-col{
      min-height: 50px;
    }
  }
  .widget-view-action.widget-col-action{
    background: #e6a23c;
  }
  &::after{
    display: none;
  }
}
.relative {
  position: relative;
  .empty-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #dddddd;
    pointer-events: none;
  }
}
.form-make-grid-scroll {
  @include scrollBar($x: auto, $y: hidden);
}
.minWidth {
  min-width: 200px;
}
</style>
